<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.css">
    <script src="./jquery-3.6.0.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-image: url(./4.jpg);
            background-repeat: no-repeat;
        }

        .container {
            width: 600px;
            margin-top: 100px;
            /* border: 1px solid #ddd; */
            padding: 0 20px;
        }

        .btn-primary {
            width: 100px;
            margin: 0 auto;
        }

        .header span {
            width: 50%;
            display: inline-block;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: 18px;
            font-weight: 600;
        }

        .header span:nth-child(1) {
            background-color: #337ab7;
            color: white;
        }

        label {
            color: white;
            margin: 20px 0;
        }

        .btn-primary {
            margin: 0 auto;
            margin-bottom: 20px;
        }

        .form-group input {
            width: 300px;
        }
        #zc{
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">用户名</label>
                <input type="text" class="form-control username" name="username" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">密码</label>
                <input type="password" class="form-control password" name="password" placeholder="请输入密码">
            </div>
            <!-- <div class="disnone"></div> -->
            <div class="checkbox">
                <label>
                    <input type="checkbox" class="rememberMe">记住用户名和密码
                </label>
            </div>
            <button type="button" class="btn btn-primary login">登录</button>
            <a  id="zc">注册</a>
        </form>
    </div>
</body>

<script>
    $('#zc').click(function(){
        location.href='./zhuce.html'
        console.log(111)
    })
    // 提取公共变量使用
    const username = $(".username")
    const password = $(".password")

    //如果上次本地存储有缓存 就记住用户名密码
    if (localStorage.getItem('username') && localStorage.getItem('password')) {
        username.val(localStorage.getItem('username'))
        password.val(localStorage.getItem('password'))
        $(".rememberMe").attr("checked", true);
    }

    //记住密码的选择状态发生改变来 进行存储  或清除缓存
    $(".rememberMe").change(function () { // 事件
        let isChecked = $(".rememberMe").prop('checked')
        //判断用户名密码是否为空 
        if (username.val() == "" || password.val() == "") {

        }
        //不为空 如果点击记住密码  就存储数据
        //没有点击密码就清除缓存
        else {
            if (isChecked) {
                localStorage.setItem("username", username.val())
                localStorage.setItem("password", password.val())
            } else {
                localStorage.removeItem("username")
                localStorage.removeItem("password")
            }
        }
    })

    $(".login").click(function () {
        let isChecked = $(".rememberMe").prop('checked')

        // 判断用户名和密码都要有值才能去发送请求
        if (username.val() == "" || password.val() == "") {
            // 提醒用户，能写点吗
            alert("用户名或者密码不能为空")

        } else {

            // 哪怕实现记住功能，但是 新输入的用户名和密码，没有写入缓存中去，重置缓存的值
            //判断最后点击登录 缓存后 是否记住了密码  记住密码才存储缓存
            if (isChecked) {
                localStorage.setItem("username", username.val())
                localStorage.setItem("password", password.val())
            }


            // console.log("登录成功");
            // location.href='./index.html'
            var data = {
                deviceId: 'deviceId',
                deviceName: 'deviceName',
                pwd: password.val(),
                username: username.val()
            }
            $.ajax({
                type: 'post',
                url: 'https://api.it120.cc/conner/user/username/login',
                data,



            }).then(res => {
               
                if (res.code == 500) {
                    alert(res.msg)

                } else {
                    history.back()
                    localStorage.setItem("token", res.data.token)
                    localStorage.setItem("username", username.val())
                }
            })
        }
    })            
</script>


</html>